<template>
	<view class="common-play" :class="show ? 'show' : ''" :style="{ 'backgroundImage': 'url(https://file.shengmaapp.com/storage/aichat/20240401/e659762a02dbbd9e6ffbc6c1e17079f4.jpg)', '--fss': app.theme.fss(), 'bottom': bottom }">
		<view class="main flex">
			<view class="left flex playing">
				<image src="https://file.shengmaapp.com/storage/aichat/20240401/e659762a02dbbd9e6ffbc6c1e17079f4.jpg" mode="aspectFill" class="image"></image>
				<view class="play flex">
					<text class="iconfont icon-bofang1"></text>
				</view>
			</view>
			<view class="right">
				<view class="head flex">
					<view class="h3 ell">See You Agign</view>
					<view class="time flex">
						<view class="nowTime">00:01</view>
						<view class="allTime">/ 05:00</view>
					</view>
				</view>
				<view class="foot flex">
					<view class="desc ell">再见吧老铁，后会有期了。</view>
					<view class="close iconfont icon-yuyinguanbi" @tap="show = false"></view>
				</view>
			</view>
		</view>
		<footer-bar></footer-bar>
	</view>
	<view class="common-play-place"></view>
</template>

<script setup>
	import { ref, onMounted, defineProps, inject, defineModel } from "vue";
	const app = inject('app');
	const show = defineModel();
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 底部位置
		bottom: {
			type: String,
			// #ifndef APP-PLUS
			default: "50px",
			// #endif
			// #ifdef APP-PLUS
			default: "0",
			// #endif
		},
		
	});
	
</script>

<style lang="scss" scoped>
	$height: 120rpx;
	.common-play-place{
		height: $height;
	}
	.common-play{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 997;
		border-radius: 25rpx 25rpx 0 0;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		margin-bottom: -300rpx;
		transition: 0.2s all;
		&:after{
			content: "";
			position: absolute;
			left: -5rpx;
			top: -5rpx;
			right: -5rpx;
			bottom: -5rpx;
			background: rgba(0,0,0,0.3);
			backdrop-filter: blur(90rpx);
		}
		&.show{
			margin-bottom: 0;
		}
		.main{
			height: $height;
			flex-direction: row;
			align-items: center;
			padding: 0 26rpx;
			z-index: 2;
			position: relative;
			.left{
				border-radius: 50%;
				width: $height * 0.7;
				height: $height * 0.7;
				background: url("/static/img/o+o.webp")no-repeat center center;
				background-size: cover;
				flex-shrink: 0;
				position: relative;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				animation: rotate 10s linear infinite;
				animation-play-state: paused;
				@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}};
				&.playing{
					animation-play-state: running;
					.play{
						display: none;
					}
				}
				.image{
					width: 70.5%;
					height: 70%;
					border-radius: 50%;
					display: block;
				}
				.play{
					width: 70%;
					height: 70%;
					border-radius: 50%;
					position: absolute;
					top: 50%;
					left: 50%;
					background: rgba(0,0,0,0.2);
					transform: translate(-50%, -50%);
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding-left: 4rpx;
					.iconfont{
						font-size: 30rpx;
						color: #FFF;
					}
				}
			}
			.right{
				flex: 1;
				width: 0;
				margin-left: 26rpx;
				.head{
					flex-direction: row;
					align-items: center;
					.h3{
						flex: 1;
						width: 0;
						margin-right: 20rpx;
						font-weight: bold;
						line-height: 1.2;
						font-size: calc(28rpx * var(--fss));
						color: #FFF;
					}
					.time{
						flex-direction: row;
						align-items: center;
						.nowTime{
							color: rgba(255,255,255,1);
							font-size: 22rpx;
						}
						.allTime{
							color: rgba(255,255,255,0.6);
							font-size: 22rpx;
							margin-left: 10rpx;
						}
					}
				}
				.foot{
					flex-direction: row;
					align-items: center;
					margin-top: 3rpx;
					.desc{
						font-size: calc(22rpx * var(--fss));
						color: rgba(255,255,255,0.6);
						line-height: 1.2;
						flex: 1;
						width: 0;
						margin-right: 20rpx;
					}
					.close{
						padding-top: 4rpx;
						font-size: calc(26rpx * var(--fss));
						line-height: 30rpx;
						width: 35rpx;
						text-align: center;
						color: rgba(255,255,255,0.45);
					}
				}
			}
		}
	}
</style>